<template>
    <div class="">
        <el-row :gutter="20" style="height: 100%">
            <!--部门数据-->
            <el-col :span="span1">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <el-input
                                v-model="deptName"
                                placeholder="请输入部门名称"
                                clearable
                                prefix-icon="Search"
                            />
                        </div>
                    </template>
                    <el-tree
                        :data="deptOptions"
                        :props="{ label: 'label', children: 'children' }"
                        :expand-on-click-node="false"
                        :filter-node-method="filterNode"
                        ref="deptTreeRef"
                        node-key="id"
                        highlight-current
                        accordion
                       
                    />
                    <!-- show-checkbox -->
                    <!-- @node-click="handleNodeClick" -->
                </el-card>
            </el-col>
            <el-col :span="span2" style="height: 440px;">
                <el-row :gutter="20" style="height: 100%;">
                    <!--人员数据-->
                    <el-col :span="12">
                        <el-card>
                            <template #header>
                            <div class="card-header">
                                <span style="line-height: 30px;">警务人员列表</span>
                            </div>
                            </template>
                            <el-tree
                            :data="PeopleOptions"
                            show-checkbox
                            node-key="userId"
                            :props="{ label: 'userName'}"
                            :default-checked-keys="defaultCheckedData"
                            @check-change="handleCheckChange"
                        />
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card>
                            <template #header>
                            <div class="card-header">
                                <span style="line-height: 30px;">辅警人员列表</span>
                            </div>
                            </template>
                            <el-tree
                                node-key="userId"
                                :default-checked-keys="defaultCheckedData"
                                :data="fujingOptions"
                                show-checkbox
                                :props="{ label: 'userName'}"
                                @check-change="handleCheckChange"
                            />
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <br>
        <el-row>
            <el-col :span="17"></el-col>
            <el-col :span="7">
                <el-button type="primary" @click="confirm('1')" >确认</el-button>
                <el-button @click="confirm('2')" >取消选择</el-button>
            </el-col>
           
        </el-row>
        
    </div>
 </template>
 
 <script setup name="User">
 import {deptTreeSelect, listUser} from "@/api/system/user";
 import { getUserProfile } from "@/api/system/user";
 const {proxy} = getCurrentInstance();
 const span1 = 0
 const span2 = 24

 const deptName = ref("");
 const isExpandAll = ref(true);

 const PeopleOptions = ref([]);
 const props = defineProps({
    defaultChecked: {
        type: Array,
        required: true
    }
});
const defaultCheckedData =  ref([]);
defaultCheckedData.value = props.defaultChecked
 const selectedIds = ref([]);
 const fujingOptions = ref([]);
 
 const deptNameData = ref("");
 const deptOptions = ref(undefined);
 const queryParams = ref({
    deptId:''
 });
 const emit = defineEmits(['userlist'])
 
 /** 通过条件过滤节点  */
 const filterNode = (value, data) => {
    if (!value) return true;
    return data.label.indexOf(value) !== -1;
 };
 /** 根据名称筛选部门树 */
 watch(deptName, val => {
    proxy.$refs["deptTreeRef"].filter(val);
 });
 
 /** 查询部门下拉树结构 */
 function getDeptTree() {
    deptTreeSelect().then(response => {
        deptOptions.value = response.data;
    });
 }
  /** 查询用户信息 */
  function getUserProfileInfo() {
    // 紧显示本单位的法警和辅警
    getUserProfile().then(res => {
        var unitId = res.data.unitId
        listUser().then(res => {
            fujingOptions.value = res.rows.filter(person => 
                person.deptName === "辅警部" && person.unitId === unitId
            );
            PeopleOptions.value = res.rows.filter(person => 
                person.deptName === "法警部" && person.unitId === unitId
            );
    });
    })
 }
  /**  */
  function handleQuery() {
    listUser(queryParams.value).then(res => {
        fujingOptions.value =res.rows.filter(
            person => person.deptName == "辅警部"
      );
      fujingOptions.value =fujingOptions.value.filter(
            person => person.unitId == queryParams.value.deptId
      );
      PeopleOptions.value = res.rows.filter(
        person => person.deptName == "法警部"
      );
      PeopleOptions.value = PeopleOptions.value.filter(
        person => person.unitId == queryParams.value.deptId
      );
     
    });
 }
 /** 节点单击事件 */
 function handleNodeClick(data) {
    queryParams.value.deptId = data.id;
    deptNameData.value = data.label;
    handleQuery();
 }
 function handleCheckChange(node, checked) {
    if (checked) {
        // 添加 ID
        defaultCheckedData.value.push(node.userId);
    } else {
        // 移除 ID
        defaultCheckedData.value = defaultCheckedData.value.filter(id => id != node.userId);
    }
}
function confirm(type){
    if(type == '2'){
        const newArray = []
        emit('userlist', newArray)
    }else{
        const combinedOptions = [...fujingOptions.value, ...PeopleOptions.value];
        const newArray = combinedOptions
            .filter(option => defaultCheckedData.value.includes(option.userId)) // 将 userId 进行比较
            .map(option => ({
                user_id: option.userId,
                deptName: option.deptName,
                userName: option.userName
            }));
        const hasLawEnforcementDept = newArray.some(item => item.deptName === '法警部');
        if(hasLawEnforcementDept){
            emit('userlist', newArray)
        }else{
            proxy.$modal.msgError("至少选择一个法警部门人员");
        }
    }
    
}
//  getDeptTree();
 getUserProfileInfo()
 </script>
 <style scoped>
:deep() .el-card{
    height: 100%;
}
</style>